<template>
  <div>
    <h2>出勤率</h2>
    <table style="width: 100%;height:20px;">
      <tr><th>ID</th>
        <th>姓名</th>
        <th>出勤率</th></tr>
    </table>
    <div style="width: 100%;height:300px;overflow: scroll;overflow-x: hidden">
      <table >
        <tr v-for="(item,index) in infoLi" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.attend}}</td>
        </tr>
      </table></div>
  </div>
</template>

<script>
export default {
  name: "Attendance",
  props:{
    infoLi:{
      type : Array,
      default(){
        return[]
      }
    }
  },
  data(){
    return{
    }
  }
}
</script>

<style scoped>
table{
  width: 100%;
}
::-webkit-scrollbar {
  width: 0 !important;
}
::-webkit-scrollbar {
  width: 0 !important;height: 0;
}

th{
  color: cyan;
  width: 33%;
  text-align: center;
}
td{
  color: white;
  text-align: center;
}
h2{
  color: cyan;
  text-align: center;
}
tr:nth-child(2n){
  background-color: rgba(255, 251, 240, 0.3);
}
</style>
